<template>
  <div id="app"> 
      用户名 
        <input v-model="form.name">  
      年龄  
        <input v-model="form.age"> 
        <button @click="add()">立即提交</button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column type="selection"> </el-table-column>
      <el-table-column type="index" label="id"> </el-table-column>
      <el-table-column prop="name" label="姓名" > </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="time" label="日期"> </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
      <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table> 

  </div>
</template>
<script>
import {mapState,mapMutations} from "vuex"
export default {
  data() {
    return {
      tableDate: [], 
      form: {
        name: "",
        age: "",
        time:new Date().toLocaleString()
      },
    };
  },

  mounted() {},
  computed:{
    ...mapState(['tableData'])
  },
  methods: {
    ...mapMutations(['addobj','delobj','dellobj']),
    //添加
    add(){
      //非空判断
      if(this.form.name==""||this.form.age==""){
        return alert('数据不能为空')
      }
      //加数据
      var obj={name:this.form.name,age:this.form.age,time:this.form.time}
      //调用
      this.addobj(obj)
      //提示
      this.$message.success('提交成功')
      //清空
      this.form.name=this.form.age=""
    },
    // 删除
    handleDelete(index){
      this.$confirm('此操作将永久删除该文件,是否继续?','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delobj(index)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }, 
  },
};
</script>